<template>
  <!-- 导航栏组件 -->
  <div class="container">
    <img src="../statics/img/logo.png" alt="">
    <div class="menu">
      <div class="item" v-for="item, key in menus" :key="key" :class="{ isActive: currMenu == key }"
        @click="handleMenu(key, item, '1')">
        {{ item.name }}
        <i v-if="item.subMenus" style="margin-left: 4px;" class="el-icon-arrow-up"></i>
        <div v-if="item.subMenus" class="subMenu">
          <div class="subItem" v-for="subItem, ind in item.subMenus" :key="ind"
            :class="{ isSubActive: currSubMenu == ind }" @click="handleMenu(ind, subItem, '2')">{{ subItem.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "navMenu",
  data() {
    return {
      currMenu: 0,
      currSubMenu: 0, 
      menus: [
        { name: '测试一', path: '/test_1' },
        { name: '测试二', path: '/test_2' },
        {
          name: '其他', path: '', subMenus: [
            { name: '测试三', path: '/test_3' },
            { name: '测试四', path: '/test_4' },
            { name: '测试五', path: '/test_5' },
          ]
        },
      ],
    };
  },
  mounted() {
    this.$router.push('/test_1')
  },
  computed: {

  },
  watch: {
    $route(to, from) {
      let menuIndex = this.menus.findIndex(item => item.path == to.path)
      let subIndex = this.menus[2].subMenus.findIndex(item => item.path == to.path)
      this.currMenu = menuIndex === -1 ? 2 : menuIndex
      this.currSubMenu = subIndex === -1 ? 0 : subIndex
    }
  },
  methods: {
    handleMenu(key, item, level) {
      if (level === '1') {
        this.currMenu = key;
      } else {
        this.currSubMenu = key;
      }
      if (item.path && this.$route.path != item.path) {
        this.$router.push(item.path)
      }

    },
  }
};
</script>

<style scoped lang="less">
.container {
  height: 52px;
  background-color: #2d313a;
  display: flex;
  align-items: center;

  img {
    height: 32px;
    padding-left: 42px;
  }

  .menu {

    flex: 1;
    display: flex;
    justify-content: center;
    padding-right: 150px;
    height: 100%;

    .item {
      width: 88px;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .item:hover {
      background-color: #c89f67;
    }

    .item:hover .subItem {
      visibility: visible;
      box-shadow: -2px 2px 5px -4px #000;
    }

    .isActive {
      background-color: #c89f67;
    }

    .subMenu {
      width: 88px;
      position: absolute;
      top: 52px;
      left: 0;
      box-shadow: -2px 2px 5px -4px #000;
      visibility: hidden;
      z-index: 99;

      .subItem {
        height: 32px;
        line-height: 32px;
        text-align: center;
        background-color: #c89f67;
      }

      .subItem:hover {
        background-color: #f0c181;
      }

      .isSubActive {
        background-color: #f0c181;
      }
    }
  }
}
</style>